<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
// 导入ts类型  import 后面推荐跟上一个type
// import type  后面导进来的内容 是类型，不能当做值来用
// ts里面的 枚举，可以当做值来用，即是类型又是值
import { IllnessTime, Flag } from '@/enums/index'
import { showToast, showConfirmDialog } from 'vant'
import { uploadRequest } from '@/services/user'
import { useRouter } from 'vue-router'
import { useConsult } from '@/stores'

const router = useRouter()
const store = useConsult()
// const a:number = number
// const b = IllnessTime.Week

// 下面枚举类型，就等价于 字面量类型 + 联合类型
// const c:IllnessTime 等价于 const c:1|2|3|4
// const c:IllnessTime = 7

// 生命周期，dom加载完毕以后执行的函数。也叫钩子函数： 在特定的时机自动执行的函数
onMounted(() => {
  // 如果本地pinia数据里已经有了illnessDesc值，证明用户曾经填写过数据，
  // 为了提升用户体验，数据应该直接回显，不需要在填写一遍
  if (store.consult.illnessDesc) {
    showConfirmDialog({
      title: '提示',
      message: '数据已经填写，是否需要回填'
    })
      .then(() => {
        form.value.illnessDesc = store.consult.illnessDesc
        form.value.illnessTime = store.consult.illnessTime
        form.value.consultFlag = store.consult.consultFlag
        form.value.pictures = store.consult.pictures

        // 页面数据回显，图片没有显示，是因为fileList数组没有赋值
        fileList.value = store.consult.pictures
      })
      .catch(() => {
        // 如果点击了取消按钮，那我们就将数据重置为初始值
        // store.setIllness({
        //   illnessDesc: '',
        //   illnessTime: undefined,
        //   consultFlag: undefined,
        //   pictures: []
        // })
        store.clearIllness() // 这个方法是删除属性，上面是属性赋值为空
      })
  }
})

const timeOptions = [
  { name: '一周内', id: IllnessTime.Week },
  { name: '一月内', id: IllnessTime.Month },
  { name: '半年以内', id: IllnessTime.HalfAYear },
  { name: '半年以上', id: IllnessTime.Year }
]
const flagOptions = [
  { name: '就诊过', id: Flag.Attendance },
  { name: '没就诊过', id: Flag.NoAttendance }
]
const form = ref<any>({
  illnessDesc: '',
  illnessTime: undefined,
  consultFlag: undefined,
  pictures: []
})

// 下面是上传图片的逻辑
// const inputRef = ref<any>(null)
// const upload = () => {
//   // 下面代码就是模拟点击 input=file 的那个事件
//   inputRef.value.click()
// }
// const fileChange = (e: any) => {
//   // 工作里面一般在这个里面 实现上传的请求发送
//   console.log(e.target.files)
// }
const fileList = ref<any[]>([])

const afterRead = (e: any) => {
  if (!e.file) return
  e.status = 'uploading'
  e.message = '上传中...'

  // 只要上传文件都需要使用FormData对象
  const formData = new FormData()
  formData.append('file', e.file)
  uploadRequest(formData)
    .then((res) => {
      e.status = 'done'
      e.message = '上传成功'

      // 为了后面的删除 能够找到对应的元素，这里应该给本地的图片对象里面添加一个id属性
      e.id = res.data.id

      form.value.pictures.push(res.data)
      console.log(form.value.pictures)
    })
    .catch(() => {
      e.status = 'failed'
      e.message = '上传失败'
    })
}

const onOversize = () => {
  showToast('文件大小不能超过 1MB')
}

const deleteFile = (e: any) => {
  // fileList的数据会自动删除，但是pictures不会自动删除，需要通过id查找元素以后手动删除
  const index = form.value.pictures.findIndex((item: any) => item.id === e.id)
  if (index !== -1) {
    form.value.pictures.splice(index, 1)
  }
}

// 下一步按钮是否禁用
const disabled = computed(() => {
  if (
    form.value.illnessDesc &&
    form.value.illnessTime !== undefined &&
    form.value.consultFlag !== undefined
  ) {
    return false
  }
  return true
})

// 跳转页面以及保存当前页面form数据到pinia里面去
const next = () => {
  // 1. 把数据保存到pinia里面去
  store.setIllness(form.value)
  // 2.跳转页面
  // 这个页面层级在个人中心里面写过，但是这里的页面ui多一个div，标题也不一样
  // 所以说这里我们就通过路由的query参数，区分不同的跳转
  router.push('/user/family?isChange=1')
}
</script>

<template>
  <div class="consult-illness-page">
    <cp-nav-bar title="图文问诊" />
    <!-- 医生提示 -->
    <div class="illness-tip van-hairline--bottom">
      <img class="img" src="@/assets/avatar-doctor.svg" />
      <div class="info">
        <p class="tit">在线医生</p>
        <p class="tip">请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助</p>
        <p class="safe"><cp-icon name="consult-safe" /><span>内容仅医生可见</span></p>
      </div>
    </div>
    <!-- 收集信息 -->
    <div class="illness-form">
      <!-- vant-ui里面 输入框不是input， 是field组件 -->
      <van-field
        v-model="form.illnessDesc"
        rows="3"
        autosize
        type="textarea"
        maxlength="200"
        placeholder="请详细描述您的病情，病情描述不能为空"
        show-word-limit
      />
      <div class="item">
        <p>本次患病多久了？</p>
        <!-- <cp-radio-btn v-model="form.illnessTime" /> -->
        <cp-radio-btn :showLeft="false" :list="timeOptions" v-model="form.illnessTime" />
      </div>
      <div class="item">
        <p>此次病情是否去医院就诊过？</p>
        <cp-radio-btn :showLeft="false" :list="flagOptions" v-model="form.consultFlag" />
      </div>
      <!-- 图片数据的结构 -->
      <div class="item item-img">
        <van-uploader
          upload-text="上传图片"
          upload-icon="photo-o"
          v-model="fileList"
          :max-count="9"
          :max-size="1 * 1024 * 1024"
          @oversize="onOversize"
          @delete="deleteFile"
          :after-read="afterRead"
        />
        <div class="item-img-text" v-if="fileList.length === 0">
          上传内容仅医生课件，最多9张图片，最大5MB
        </div>
        <!-- <input type="file" ref="inputRef" class="my-upload" @change="fileChange" />
        <van-button type="primary" @click="upload">上传</van-button> -->
      </div>
    </div>
    <div style="margin: 15px">
      <van-button :disabled="disabled" type="primary" block @click="next">下一步</van-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my-upload {
  // 这样写是隐藏页面的显示，但是dom结构还在
  display: none;
}
.consult-illness-page {
  // padding-top: 46px;
}
.illness-tip {
  display: flex;
  padding: 15px;
  .img {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
  }
  .info {
    flex: 1;
    padding-left: 12px;
    .tit {
      font-size: 16px;
      margin-bottom: 5px;
    }
    .tip {
      padding: 12px;
      background: var(--cp-bg);
      color: var(--cp-text3);
      font-size: 13px;
      margin-bottom: 10px;
    }
    .safe {
      font-size: 10px;
      color: var(--cp-text3);
      display: flex;
      align-items: center;
      .cp-icon {
        font-size: 12px;
        margin-right: 2px;
      }
    }
  }
}
.illness-form {
  padding: 15px;
  .van-field {
    padding: 0;
    &::after {
      border-bottom: none;
    }
  }
  .item {
    > p {
      color: var(--cp-text3);
      padding: 15px 0;
    }
  }
  .item-img {
    display: flex;
    align-items: center;
    .item-img-text {
      font-size: 12px;
      color: var(--cp-tip);
    }
  }
}
</style>
